<template>
    <el-dialog
      :model-value="modelValue"
      title="任务日志"
      width="1200px"
      :before-close="handleClose"
      @close="handleClose"
      @open="dialogOpenHandler"
    >
      <div class="log-wrapper">
        <div class="log-content">{{ log }}</div>
      </div>
      <template #footer>
        <el-button @click="closeDialog">关闭</el-button>
      </template>
    </el-dialog>
  </template>
  
  <script setup lang="ts">
  import { defineProps, defineEmits } from "vue";
  
  const props = defineProps({
    modelValue: Boolean,
    log: String,
  });
  
  const emits = defineEmits(["update:modelValue"]);
  
  const closeDialog = () => {
    emits("update:modelValue", false);
  };
  
  const handleClose = () => {
    emits("update:modelValue", false);
  };
  
  const dialogOpenHandler = () => {
    // 这里可以执行打开时逻辑
  };
  </script>
  
  <style scoped>
  .el-dialog__body {
    padding: 0 !important; /* 去掉padding，避免影响布局 */
  }
  
  .log-wrapper {
    height: 600px;
    overflow-y: auto;
    padding: 16px;
  }
  
  .log-content {
    font-family: monospace;
    white-space: pre-wrap;
    word-break: break-word;
    margin: 0; /* 取消pre默认上/下margin */
    height:  600px!important;
  }
  </style>
  